<template>
  <div class="sousuo">
    <van-nav-bar
      title="不 凡"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 搜索框 -->
    <form>
      <van-search
        v-model.trim="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>

    <!-- 历史记录 -->
    <div class="sisui" v-if="ZhaunShiZhuangTai == 'lishi'">
      <div class="box">
        <div class="title">
          <div>历史记录</div>
          <div>
            <van-icon name="delete-o" size="20" @click="fangqing" />
          </div>
        </div>
        <ul>
          <li>sisui</li>
          <li v-for="item in lishiList" :key="item.id">
            <span>
              {{ item.keyword }}
            </span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 搜索列表 -->
    <div class="sousuoliebiao" v-else-if="ZhaunShiZhuangTai == 'liebiao'">
      <ul>
        <li
          @click="xiangqing(item.name)"
          v-for="item in souList"
          :key="item.id"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>

    <!-- 商品详情页面 -->
    <div class="showxiangqing" v-else>
      <ul>
        <li v-for="item in goods" :key="item.id">
          <img :src="item.list_pic_url" alt="" />
          <p>{{ item.name }}</p>
          <p>{{ item.retail_price }}</p>
        </li>
      </ul>
    </div>

    <!-- 热门商品 -->
    <div class="sisui" v-show="yuqian">
      <div class="box">
        <div class="title">
          <div>热门搜索</div>
        </div>
        <ul>
          <li
            v-for="(item, index) in remenList"
            :key="item.id"
            :class="fang == index ? 'yanse' : ''"
            @click="yun(index)"
          >
            <span>
              {{ item.keyword }}
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Souindexaction,
  clearhistoryAction,
  helperaction,
  addhistoryaction,
} from "@/api/搜索/sousuo.js";
export default {
  name: "Sousuo",
  data() {
    return {
      value: "",
      // 搜索历史
      lishiList: [],
      // 热门搜索
      remenList: [],
      fang: 0,
      // 搜索界面的数据
      souList: [],
      // 历史记录，搜素列表，商品详情三个页面的展示状态，一方显示 另外2方隐藏
      ZhaunShiZhuangTai: "lishi",
      // 商品详情页
      goods: [],
      // 热门商品的展示与隐藏
      yuqian: true,
    };
  },
  watch: {
    value() {
      if (this.value.length > 0) {
        this.ZhaunShiZhuangTai = "liebiao";
        helperaction({
          params: {
            keyword: this.value,
          },
        }).then((res) => {
          console.log(res);
          this.souList = res.data.keywords;
        });
      } else {
        this.ZhaunShiZhuangTai = "lishi";
      }
      // console.log("111");
      if (this.ZhaunShiZhuangTai === "lishi") {
        this.yuqian = true;
      } else {
        this.yuqian = false;
      }
    },
  },
  methods: {
    yun(index) {
      this.fang = index;
    },
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      this.$router.push("/home");
    },
    // 清空所有搜索历史
    fangqing() {
      clearhistoryAction({
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        Souindexaction({
          params: {
            openId: localStorage.getItem("openId"),
          },
        }).then(({ data: res }) => {
          console.log(res);
          this.lishiList = res.historyData;
          this.remenList = res.hotKeywordList;
        });
      });
    },
    // 搜索列表点击
    xiangqing(val) {
      this.ZhaunShiZhuangTai = "goods";
      addhistoryaction({
        keyword: val,
        openId: localStorage.getItem("openId"),
      }).then((res) => {});
      helperaction({
        params: {
          keyword: val,
        },
      }).then((res) => {
        console.log(res);
        this.goods = res.data.keywords;
      });
    },
  },
  created() {
    Souindexaction({
      params: {
        openId: localStorage.getItem("openId"),
      },
    }).then(({ data: res }) => {
      console.log(res);
      this.lishiList = res.historyData;
      this.remenList = res.hotKeywordList;
    });
  },
};
</script>

<style lang="less" scoped>
.sousuo {
  .sisui {
    width: 85%;
    margin: 10px auto 15px;
    background-color: rgb(252, 252, 252);
    .box {
      width: 100%;
      .title {
        height: 30px;
        margin-bottom: 5px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          padding: 5px;
          border: 1px solid #999;
          margin: 0 16px 11px 0;
          span {
            font-size: 12px;
            color: black;
          }
        }
        .yanse {
          border: 1px solid rgb(236, 5, 5);
        }
      }
    }
  }
  .sousuoliebiao {
    ul {
      width: 90%;
      margin: 0 auto;
      li {
        width: 100%;
        height: 36px;
        line-height: 36px;
        color: black;
      }
    }
  }
}
</style>